<template>
  <div class="details_page">
    <div class="top" v-show="flag">
      <div @click="$router.go(-1)" class="iconfont icon-zuojiantou"></div>
      <div class="iconfont icon-xiepinglun"></div>
    </div>

    <!-- 内容部分 -->
    <div class="section" @click="flagFun" :class="[{daytime:isDayTime},{changeSizeS:fonsize==1},{changeSizeM:fonsize==2},{changeSizeL:fonsize==3}]">
      <van-swipe
        class="my-swipe"
        @change="onChange"
        :initial-swipe="page"
        indicator-color="white"
        :loop="false"
      >
        <van-swipe-item
          v-for="(item, index) of contentArr"
          :key="index"
          v-html="item"
        >
          
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="bottom" v-show="flag">
      <div class="item" @click="showPopup">
        <span class="iconfont icon-santiaoxian"></span>
        <div>目录</div>
      </div>
      <div class="item" @click="lastFun(content_uuid)">
        <span class="iconfont icon-zuojiantou1"></span>
        <div>上一章</div>
      </div>
      <div class="item" @click="nextFun(content_uuid)">
        <span class="iconfont icon-xiangyoujiantou"></span>
        <div>下一章</div>
      </div>
      <div v-show="!isDayTime" class="item" @click="changeColor">
        <span class="iconfont icon-taiyang"></span>
        <div>白天</div>
      </div>
       <div v-show="isDayTime" class="item" @click="changeColor">
        <span class="iconfont icon-yueliang"></span>
        <div>黑夜</div>
      </div>
      <div class="item" @click.stop.prevent="sizeShowFun($event)" >
        <span class="iconfont icon-zitiyanse"></span>
        <div>字体</div>
      
        
      </div>
        <div v-show="sizeShow" class="changeFontSize">
            <div @click="changeSizeFun(3)" :class="{bcColor:fonsize==3}">大</div>
            <div @click="changeSizeFun(2)" :class="{bcColor:fonsize==2}">中</div>
            <div @click="changeSizeFun(1)" :class="{bcColor:fonsize==1}">小</div>
        </div>
    </div>

    <!-- 左侧列表 -->
    <van-popup
      v-model="show"
      position="left"
      :style="{ width: '60%', height: '100%' }"
    >
      <div class="book_name">都市藏娇</div>
      <div class="all">
        <div class="num">共1535章</div>
        <div class="text" @click="flashbackFun">倒序</div>
      </div>
      <ul class="list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <li
              v-for="(item, index) in contentList.slice(1, contentListLength)"
              :key="index"
              @click="changePageFun(item.uuid)"
            >
              {{ item.title }}
            </li>
          </van-list>
        </van-pull-refresh>
      </ul>
    </van-popup>
  </div>
</template>


<script>
import { getReaderBookContent, getReaderBookInfo } from "../api/base";
export default {
  name: "detailsP",
  data() {
    return {
      sizeShow:false,
      bookId: "",
      // isId: "", // 用来判断再次进来的时候是不是同一本书id
      content_uuid: "", //当前章节id
      show: false,
      flag: 0, // 控制top bottom 是否出现
      content: "",  //存放书的内容
      contentList: "", // 所有章节
      page: 0, //控制章节
      oldPage: 0, // 控制轮播图看书
      contentArr: [], //存放书的内容数组
      loading: false,
      finished: false,
      refreshing: false,
      L: 1, //控制裁切长度
      timer: null, // 节流
      oldTime: 0, // 旧的时间
      isDayTime:false, // 默认白天
      fonsize:2,
      isflag:false, //用来加载Laoding
    };
  },

  computed: {

    // 计算左侧目录
    contentListLength() {
      return this.L * 18;
    },
  },
  methods: {

    // 左右看书
    onChange(index) {
      console.log(index);
      if (this.oldPage - index > 0) {
        this.lastFun(this.content_uuid);
      } else {
        this.nextFun(this.content_uuid);
      }
      this.oldPage = index;
    },

    // 显示头部跟底部导航栏
    flagFun() {
      this.flag = this.flag == 0 ? 1 : 0;
    },
    showPopup() {
      this.show = true;
      
    },
    // 字体按钮
    sizeShowFun(event){
      console.log(event);
      this.sizeShow =  !this.sizeShow;
      event.stopPropagation()
      console.log(1111);
    },

    onLoad() {
      let that = this;
      setTimeout(() => {
        that.L += 1;
        that.loading = false;
        if (that.contentList.length <= that.L * 18) {
          that.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },

    // 让列表倒叙
    flashbackFun() {
      this.contentList = this.contentList.reverse();
    },

    //  arr[0 1 2 3 4 5 6 7 8 9 10]
    //      1 2 3 4 5 6 7 8 9
    // 章节列表
    getReaderBookInfoFun() {
      this.$toast.loading({
        message: "加载中...",
        overlay: true,
      });

      getReaderBookInfo({ source_uuid: this.bookId }).then((data) => {
        console.log(data.data.catalog);
        // 拿到所有章节
        this.contentList = data.data.catalog;
        this.content_uuid = this.contentList[this.page].uuid;

        // 章节内容
        getReaderBookContent({
          source_uuid: this.bookId,
          content_uuid: this.contentList[this.page].uuid,
        }).then((data) => {
          //   console.log(data.data.content);
          this.content = data.data.content;
          this.$set(this.contentArr, this.page, this.content);
        });

        // 章节内容 page + 1
        getReaderBookContent({
          source_uuid: this.bookId,
          content_uuid: this.contentList[this.page + 1].uuid,
        }).then((data) => {
          this.$set(this.contentArr, this.page + 1, data.data.content);
        });

         if (this.contentArr.length != 0) {
          console.log(111);
          this.$toast.clear();
          this.isflag = true;
        }
      });
    },

    // 下一章
    nextFun(id) {
      // this.content = ""
      // 防抖
      // if(this.timer){
      //   clearTimeout(this.timer);
      //   this.timer = null;
      //   this.content = ""
      // }
      // this.timer = setTimeout(()=>{
      //     console.log(this);
      //     // 要执行的核心代码
      //     this.content = 1
      // },1000)

      // 节流
      let newTime = new Date().getTime();
      // console.log(newTime);
      if (newTime - this.oldTime < 500) {
        return;
      }

      this.oldTime = newTime;
      this.flag = 0;

      //  通过当前id 找到这个章节在章节列表里的下标
      let index = this.contentList.findIndex((item) => item.uuid === id);

      this.page = index + 1;

      this.content_uuid = this.contentList[this.page].uuid;

      if (!this.contentArr[this.page]) {
        // 章节内容
        getReaderBookContent({
          source_uuid: this.bookId,
          content_uuid: this.contentList[this.page].uuid,
        }).then((data) => {
          // this.content = data.data.content;
          this.$set(this.contentArr, this.page, data.data.content);
          this.$el.scrollTop = 0;
        });
      }

      // // 章节内容 page + 1
      getReaderBookContent({
        source_uuid: this.bookId,
        content_uuid: this.contentList[this.page + 1].uuid,
      }).then((data) => {
        this.$set(this.contentArr, this.page + 1, data.data.content);
      });

      this.$el.scrollTop = 0;
    },

    // 上一章
    lastFun(id) {
      // 防抖
      // if (this.timer) {
      //   clearTimeout(this.timer);
      //   this.timer = null;
      //   this.content = "";
      // }
      // this.timer = setTimeout(() => {
      //   console.log(this);
      //   // 要执行的核心代码
      //   this.content = 1;
      // }, 1000);

      // 节流
      let newTime = new Date().getTime();
      // console.log(newTime);
      if (newTime - this.oldTime < 500) {
        return;
      }

      this.oldTime = newTime;
      this.content = 1;

      //  通过当前id 找到这个章节在章节列表里的下标
      let index = this.contentList.findIndex((item) => item.uuid == id);
      if (index == 0) {
        this.$toast("已经是第一章了");
        return;
      }
      this.page = index == 0 ? 0 : index - 1;
      this.content_uuid = this.contentList[this.page].uuid;

      if (!this.contentArr[this.page]) {
        // 章节内容
        getReaderBookContent({
          source_uuid: this.bookId,
          content_uuid: this.contentList[this.page].uuid,
        }).then((data) => {
          this.content = data.data.content;
          this.$set(this.contentArr, this.page, this.content);
          this.$el.scrollTop = 0;

          // // 章节内容 page - 1
          getReaderBookContent({
            source_uuid: this.bookId,
            content_uuid: this.contentList[this.page - 1].uuid,
          }).then((data) => {
            this.$set(this.contentArr, this.page - 1, data.data.content);
          });
        });
      }
    },

    // 点击目录切换章节
    changePageFun(id) {
      this.content_uuid = id;

      // 点击哪一张 找到对应下标
      let index = this.contentList.findIndex((item) => item.uuid == id);

      // 如果已经存在这个章节内容 就不需要再次调用接口获取
      if (this.contentArr[index]) {
        this.page = index;
        return;
      }

      // 章节内容
      getReaderBookContent({
        source_uuid: this.bookId,
        content_uuid: id,
      }).then((data) => {
        this.$set(this.contentArr, index, data.data.content);
        this.page = index;

        // 判断上一张有没有 如果没有就获取
        if (!this.contentArr[this.page - 1]) {
          getReaderBookContent({
            source_uuid: this.bookId,
            content_uuid: this.contentList[this.page - 1].uuid,
          }).then((data) => {
            this.$set(this.contentArr, this.page - 1, data.data.content);
          });
        }

        // 判断下一张有没有 如果没有就获取
        if (!this.contentArr[this.page + 1]) {
          getReaderBookContent({
            source_uuid: this.bookId,
            content_uuid: this.contentList[this.page + 1].uuid,
          }).then((data) => {
            this.$set(this.contentArr, this.page + 1, data.data.content);
          });
        }
      
      this.$el.scrollTop = 0;
      this.show =false
      });
    },
    // 改变白天黑夜模式
    changeColor(){
        this.isDayTime = !this.isDayTime
    },
    
    // 改变字体大小
    changeSizeFun(num){
        if(num==1){
            this.fonsize = num;
        }else if(num==2){
             this.fonsize = num;
        }else{
            this.fonsize = num
        }
    }
  },
  created() {
    // console.log(this.$route.params);
    // this.bookId = this.$route.params.bookId;
    // this.content_uuid = this.$route.params.content_uuid
    // let detailsInfo = this.$store.state.bookInfo;
    // this.bookId = detailsInfo.id;
    // // 章节列表
    // this.getReaderBookInfoFun();
  },
  activated() {
    // this.bookId = this.$route.params.bookId;
    let detailsInfo = this.$store.state.bookInfo;

    let isId = detailsInfo.id;
    if (isId != this.bookId) {
      this.page = 0;
      
      this.bookId = isId;
    this.oldPage = this.page;  //控制轮播翻页
    this.content = 1;
    console.log("activated");

    //     // 章节列表
    this.getReaderBookInfoFun();
    }
    
    

    
    
    
  },
};
</script>

<style lang="less">


.details_page {
  overflow-y: auto;
  height: 100vh;

  .top {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    padding-top: 5px;
    box-sizing: border-box;
    .iconfont {
      font-size: 20px;
      line-height: 30px;
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    padding: 0 10px;
    padding-top: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    text-align: center;
    .item {
      font-size: 14px;
    }
     .changeFontSize{
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 40px;
        background-color: #ffffff;
        position: fixed;
        bottom: 49px;
        left: 0;
        div{
          height: 30px;
          line-height: 30px;
          width: 25%;
          margin-top: 4px;
          border: 1px solid #ddd;
          
        }
      }
  }
  .section {
    width: 100%;
    // height: 100vh;
    padding: 0 1em;
    padding-top: 3em;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #f6f6f6;
    
    h1 {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 1em;
    }
    p {
      letter-spacing: 3px;
      margin-bottom: 10px;
    }
  }
  .daytime{
      background-color: black;
      color: blanchedalmond;
    }
    .changeSizeS{
      font-size: 14px;
    }
    .changeSizeM{
      font-size: 16px;
    }
    .changeSizeL{
      font-size: 20px;
    }
    .bcColor{
      background-color: red;
    }
  .van-popup {
    padding: 0 10px;
    padding-top: 15px;
    box-sizing: border-box;
    .book_name {
      font-size: 20px;
      margin-bottom: 4px;
    }
    .all {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      .text {
        border: 1px solid #ddd;
        font-size: 14px;
        border-radius: 5px;
        padding: 2px 5px;
      }
      .num {
        font-size: 14px;
      }
    }
    .list {
      li {
        font-size: 15px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>